﻿<template>
  <div>
    <base-card class="mt16px custom-card" title="下单人信息">
      <template #header>
        <div class="header-right" @click="toggleVisibility">
          <base-icon
            :name="isVisible ? 'iconfont ic-yanjingyincang' : 'iconfont ic-yanjingkaiqi'"
            :size="16"
            color="var(--bd)"
          />
          <span>{{ isVisible ? "隐藏" : "显示" }}</span>
        </div>
      </template>
      <div class="card-content">
        <div class="user-info">
          <div class="user-info-left">
            <img src="@/assets/order/user_header.png" alt="用户信息头" />
            <div class="user-info-header-content">
              <span class="name">张三</span>
              <div class="history" @click="emitOpenHistory">
                <span>历史订单</span>
                <base-icon name="iconfont ic-xiajiantou1" :size="12" color="var(--bd)" />
              </div>
            </div>
          </div>
          <div class="user-info-right">
            <div class="detail-item dashed-line">
              <span class="detail-label">年龄</span>
              <span class="detail-value">30</span>
            </div>
            <div class="detail-item dashed-line">
              <span class="detail-label">性别</span>
              <span class="detail-value">男</span>
            </div>
            <div class="detail-item dashed-line" style="min-width: 172px">
              <span class="detail-label">手机号</span>
              <span class="detail-value">
                {{ !isVisible ? "153****2007" : "153444412007" }}
                <base-icon name="iconfont ic-dianhua" :size="14" color="var(--bd)" />
              </span>
            </div>
            <div class="detail-item" style="min-width: 172px; padding-right: 0px">
              <span class="detail-label">{{ idLabel }}</span>
              <span class="detail-value">{{ !isVisible ? "43**************22" : "430702199308164055" }}</span>
            </div>
            <div class="detail-item dashed-line">
              <span class="detail-label">{{ photoLabel }}</span>
              <span class="detail-value" v-if="!isVisible">显示后可查看</span>
              <div class="history" v-else @click="emitOpenIdPhoto">
                <span>查看照片</span>
                <base-icon name="iconfont ic-xiajiantou1" :size="12" color="var(--bd)" />
              </div>
            </div>
            <div class="detail-item">
              <span class="detail-label">下单时间</span>
              <span class="detail-value">2025-09-16 17:25:46</span>
            </div>
          </div>
        </div>
        <div class="info-grid">
          <div v-for="(item, index) in userInfoData" :key="index" class="info-item">
            <span class="label">
              {{ item.label
              }}<base-icon
                v-if="item.label === '周期扣款'"
                name="iconfont ic-wenhaobangzhu"
                :size="16"
                color="var(--ct4)"
              />
              <span>：</span>
            </span>
            <span class="value">
              <!-- 成功状态带图标 -->
              <template v-if="item.type === 'success'">
                <base-icon name="iconfont ic-zhengque" :size="16" color="var(--sc)" />
                {{ item.value }}
              </template>
              <!-- 成功状态带链接 -->
              <template v-else-if="item.type === 'success-with-link'">
                <base-icon name="iconfont ic-zhengque" :size="16" color="var(--sc)" />
                {{ item.value }}
                <span class="link-text">{{ item.linkText }}</span>
                <base-icon name="iconfont ic-xiajiantou1" :size="14" color="var(--bd)" />
              </template>
              <!-- 警告标签 -->
              <template v-else-if="item.type === 'warning-tag'">
                <el-tag type="warning" size="small">{{ item.value }}</el-tag>
              </template>
              <!-- 默认标签 -->
              <template v-else-if="item.type === 'default-tag'">
                <el-tag size="small" type="info">{{ item.value }}</el-tag>
              </template>
              <!-- 普通文本 -->
              <template v-else>
                {{ item.value }}
              </template>
            </span>
          </div>
        </div>
        <div class="info-grid mt-16px">
          <div class="info-item">
            <span class="label">公司名称：</span>
            <span class="value">广西壮族自治区桂林市临桂区...</span>
          </div>
          <div class="info-item">
            <span class="label">营业执照编号：</span>
            <span class="value">430702199308164055</span>
          </div>
          <div class="info-item">
            <span class="label">营业执照：</span>
            <span class="value" v-if="!isVisible">显示后可查看</span>
            <span class="value" v-else @click="emitOpenBizLicensePhoto">
              <span class="link-text" style="margin-left: 0">查看照片</span>
              <base-icon name="iconfont ic-xiajiantou1" :size="14" color="var(--bd)" />
            </span>
          </div>
        </div>
        <div class="info-grid mt-16px">
          <div class="info-item">
            <span class="label">经营地址：</span>
            <span class="value"
              >南京市栖霞区迈皋桥街道燕城大道10号1幢2718室南京市栖霞区迈皋桥街道燕城大道10号1幢2718室南京市栖霞区迈皋桥街道燕城大道10号1幢2718室南京市栖霞区迈皋桥街道燕城大道10号1幢2718室</span
            >
          </div>
        </div>
      </div>
      <DetailsBtnsAction />
    </base-card>
  </div>
</template>
<script setup>
  import DetailsBtnsAction from "./DetailsBtnsAction.vue";
  const emit = defineEmits(["open-id-photo", "open-biz-license-photo", "open-history"]);

  // 是否为企业租赁：true 企业；false 个人
  const isEnterpriseLease = ref(true);

  const isVisible = ref(true);

  const toggleVisibility = () => {
    isVisible.value = !isVisible.value;
  };

  // 底部概览信息
  const userInfoData = ref([
    { label: "在途订单数", value: "165", type: "text" },
    { label: "完结订单数", value: "165", type: "text" },
    { label: "订单状态", value: "待发货", type: "warning-tag" },
    { label: "人脸认证", value: "已通过", type: "success" },
    { label: "渠道来源", value: "青云租", type: "text" },
    { label: "订单类型", value: isEnterpriseLease.value ? "企业租赁" : "个人租赁", type: "default-tag" },
    { label: "是否芝麻免押", value: "风控免押", type: "text" },
    { label: "租赁方式", value: "到期归还-支持续租/购买", type: "text" },
    { label: "蚂蚁保险", value: "已投保", type: "success-with-link", linkText: "查看保单" },
    { label: "周期扣款", value: "已签约", type: "success" },
    { label: "是否发起公证", value: "否", type: "text" },
    { label: "是否代发", value: "否", type: "text" },
  ]);

  // 身份信息：根据企业/个人切换显示
  const idLabel = computed(() => (isEnterpriseLease.value ? "法人身份证号" : "身份证号"));
  const photoLabel = computed(() => (isEnterpriseLease.value ? "法人身份证照片" : "身份证照片"));

  // 事件上抛（父子通信）
  const emitOpenIdPhoto = () => {
    emit("open-id-photo", { isEnterprise: isEnterpriseLease.value });
  };
  const emitOpenBizLicensePhoto = () => {
    emit("open-biz-license-photo");
  };
  const emitOpenHistory = () => {
    emit("open-history");
  };
</script>
<style lang="scss" scoped>
  :deep(.custom-card .card-header .header-container) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    background-color: var(--fl1);
    padding: 2px 8px;
    font-size: 12px;
    color: var(--ct2);
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    &:hover {
      background-color: var(--fl2);
    }
  }

  .card-content {
    .user-info {
      height: 80px;
      border-radius: 8px;
      background: linear-gradient(180deg, var(--bd9) 0%, #ffffff 100%);
      border: 1px solid var(--bd9);
      margin-bottom: 24px;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .history {
        font-size: 12px;
        color: var(--bd);
        display: flex;
        line-height: 20px;
        align-items: center;
        gap: 4px;
      }
      .user-info-left {
        display: flex;
        gap: 12px;
        .user-info-header-content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          gap: 2px;
          .name {
            font-size: 16px;
            color: var(--ct1);
            font-weight: 500;
          }
        }
        img {
          width: 48px;
          height: 48px;
          object-fit: cover;
          border-radius: 50%;
        }
      }
      .user-info-right {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .dashed-line {
          border-right: 1px dashed var(--cb1);
        }
      }

      .detail-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0 32px;
        gap: 4px;

        .detail-label {
          font-size: 12px;
          color: var(--ct3);
          line-height: 16px;
        }

        .detail-value {
          font-size: 14px;
          color: var(--ct1);
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }
    }
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--cb1);
  }

  .info-item {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    line-height: 22px;
    .label {
      color: var(--ct3);
      font-size: 14px;
      display: flex;
      line-height: 22px;
      align-items: center;
      flex-shrink: 0;
    }

    .value {
      color: var(--ct1);
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 4px;
      .link-text {
        color: var(--bd);
        cursor: pointer;
        font-size: 14px;
        margin-left: 4px;
      }
    }
  }
</style>
